<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>Heatmap</title>

    <link rel="stylesheet" href="images/style.css">
    <script type="text/javascript" src="images/jquery.js"></script>

</head>
<body>

<div class="wrap">
    <div class="head">
        <h1>
            <a href="http://2kid.org" title="2Kid">2Kid </a>
        </h1>

        <h2>关注web、关注前端</h2>
    </div>
    <div class="banner">
        <h3>Heatmap 示例</h3>
    </div>
    <div class="content dometop">
        <div class="box domepage">
            <h4>示例</h4>


            <div class="cont">
<canvas id="heatmap" style="border: 1px solid ; " height="300" width="300"></canvas>
<script>
var points = {};
var SCALE = 3;
var x = -1;
var y = -1;
function loadDemo() {
    canvas = document.getElementById("heatmap");
    context = canvas.getContext('2d');
    context.globalAlpha = 0.2;
    context.globalCompositeOperation = "lighter";
    function sample() {
        if (x != -1) {
            addToPoint(x, y)
        }
        setTimeout(sample, 100);
    }
    canvas.onmousemove = function(e) {

        x = e.pageX - e.target.offsetLeft;
        y = e.pageY - e.target.offsetTop;
        addToPoint(x, y)
    }
    sample();
}

function getColor(intensity) {
    var colors = ["#072933", "#2E4045", "#8C593B", "#B2814E", "#FAC268", "#FAD237"];
    return colors[Math.floor(intensity / 2)];
}
function drawPoint(x, y, radius) {
    context.fillStyle = getColor(radius);
    radius = Math.sqrt(radius) * 6;

    context.beginPath();
    context.arc(x, y, radius, 0, Math.PI * 2, true)

    context.closePath();
    context.fill();
}
function addToPoint(x, y) {
    x = Math.floor(x / SCALE);
    y = Math.floor(y / SCALE);

    if (!points[[x,y]]) {
        points[[x,y]] = 1;
    } else if (points[[x,y]] == 10) {
        return
    } else {
        points[[x,y]]++;
    }
    drawPoint(x * SCALE, y * SCALE, points[[x,y]]);
}
window.addEventListener("load", loadDemo, true);
                </script>


            </div>
        </div>
        <div class="box domelist">
            <h4>dome列表</h4>

            <div class="cont">
                <ul>
                    <li><a href="FileReader.html">FileReader</a></li>
                    <li><a href="CSSsprites.html">CSS sprites在线javascript版</a></li>
                    <li><a href="Heatmap.html">canvas Heatmap</a></li>
                </ul>
            </div>
        </div>
        <div class="box codepage">
            <h4>代码</h4>

            <pre class="cont">
&lt;canvas id="heatmap" style="border: 1px solid ; " height="300" width="300"&gt;&lt;/canvas&gt;
&lt;script&gt;
var points = {};
var SCALE = 3;
var x = -1;
var y = -1;
function loadDemo() {
    canvas = document.getElementById("heatmap");
    context = canvas.getContext('2d');
    context.globalAlpha = 0.2;
    context.globalCompositeOperation = "lighter";
    function sample() {
        if (x != -1) {
            addToPoint(x, y)
        }
        setTimeout(sample, 100);
    }
    canvas.onmousemove = function(e) {

        x = e.pageX - e.target.offsetLeft;
        y = e.pageY - e.target.offsetTop;
        addToPoint(x, y)
    }
    sample();
}

function getColor(intensity) {
    var colors = ["#072933", "#2E4045", "#8C593B", "#B2814E", "#FAC268", "#FAD237"];
    return colors[Math.floor(intensity / 2)];
}
function drawPoint(x, y, radius) {
    context.fillStyle = getColor(radius);
    radius = Math.sqrt(radius) * 6;

    context.beginPath();
    context.arc(x, y, radius, 0, Math.PI * 2, true)

    context.closePath();
    context.fill();
}
function addToPoint(x, y) {
    x = Math.floor(x / SCALE);
    y = Math.floor(y / SCALE);

    if (!points[[x,y]]) {
        points[[x,y]] = 1;
    } else if (points[[x,y]] == 10) {
        return
    } else {
        points[[x,y]]++;
    }
    drawPoint(x * SCALE, y * SCALE, points[[x,y]]);
}
window.addEventListener("load", loadDemo, true);
&lt;/script&gt;
            </pre>
        </div>

    </div>
    <div class="foot">
        Copyright © 2011 <strong>2Kid</strong> |
        Powered by <a target="bank" href="http://wordpress.org/">WordPress</a> |
        Theme by <a target="bank" href="http://2kid.org">2Kid</a>
    </div>
</div>

<script type="text/javascript" src="images/dome.js"></script>
</body>
</html>
